wip: zen

1 files changed, 115 insertions, 0 deletions

diff --git a/packages/cloud/app/src/routes/workspace/[id].css b/packages/cloud/app/src/routes/workspace/[id].css
new file mode 100644
index 000000000..8b318a19f
--- /dev/null
+++ b/packages/cloud/app/src/routes/workspace/[id].css
@@ -0,0 +1,115 @@
+[data-page="workspace-[id]"] {
+  max-width: 64rem;
+  padding: var(--space-10) var(--space-4);
+  margin: 0 auto;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-10);
+
+  @media (max-width: 30rem) {
+    padding-top: var(--space-4);
+    padding-bottom: var(--space-4);
+
+    gap: var(--space-8);
+  }
+
+  [data-slot="sections"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-16);
+
+    @media (max-width: 30rem) {
+      gap: var(--space-8);
+    }
+
+    section {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-8);
+
+      @media (max-width: 30rem) {
+        gap: var(--space-6);
+      }
+
+      /* Section titles */
+      [data-slot="section-title"] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-1);
+
+        h2 {
+          font-size: var(--font-size-md);
+          font-weight: 600;
+          line-height: 1.2;
+          letter-spacing: -0.03125rem;
+          margin: 0;
+          color: var(--color-text-secondary);
+          text-transform: uppercase;
+
+          @media (max-width: 30rem) {
+            font-size: var(--font-size-md);
+          }
+        }
+
+        p {
+          line-height: 1.5;
+          font-size: var(--font-size-md);
+          color: var(--color-text-muted);
+
+          a {
+            color: var(--color-text-muted);
+          }
+
+          @media (max-width: 30rem) {
+            font-size: var(--font-size-sm);
+          }
+        }
+      }
+    }
+    section:not(:last-child) {
+      border-bottom: 1px solid var(--color-border);
+      padding-bottom: var(--space-16);
+
+      @media (max-width: 30rem) {
+        padding-bottom: var(--space-8);
+      }
+    }
+  }
+
+  /* Title section */
+  [data-component="title-section"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding-bottom: var(--space-8);
+    border-bottom: 1px solid var(--color-border);
+
+    @media (max-width: 30rem) {
+      padding-bottom: var(--space-6);
+    }
+
+    h1 {
+      font-size: var(--font-size-2xl);
+      font-weight: 500;
+      line-height: 1.2;
+      letter-spacing: -0.03125rem;
+      margin: 0;
+      text-transform: uppercase;
+
+      @media (max-width: 30rem) {
+        font-size: var(--font-size-xl);
+      }
+    }
+
+    p {
+      line-height: 1.5;
+      font-size: var(--font-size-md);
+      color: var(--color-text-muted);
+
+      a {
+        color: var(--color-text-muted);
+      }
+    }
+  }
+}